<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="登录" http-equiv="keywords">
    <meta name="format-detection" content="telephone=no">
    <!-- 禁止IPHONE识别手机号码 -->
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <meta name="renderer" content="webkit">
    <title>登录</title>
    <!-- css -->
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/index.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/swiper.min.css}">
    <!-- public_css -->
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/public_lib.css}">
    <!-- zy_public_css -->
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/zy_public.css}">
    <!-- 子页css -->
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/children.css}">
    <!-- js -->
    <script type="text/javascript" th:src="@{/asserts/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/asserts/js/swiper.min.js}"></script>
    <script type="text/javascript" th:src="@{/asserts/js/public.js}"></script>
    <style type="text/css">
        body {
            background-color: #2e88e8;
        }

        .t0 {
            position: relative;
            width: 57%;
            height: 31px;
            text-align: center;
            top: 20%;
            margin: auto;
            font-size: 2em;
            line-height: 31px;
            font-family: "hc-himanatu1";
            color: #fff;
        }

        label {
            color: #fff;
            font-size: 15px;
            font-family: "hc-himanatu1";
            letter-spacing: 1px;
        }

        .box {
            position: absolute;
            top: 22%;
            left: 10%;
            width: 80%;
            height: 350px;
        }

        .input01 {
            width: 80%;
            height: 50px;
            border: 1px solid #fff;
            border-radius: 6px;
            position: absolute;
            top: 25%;
            left: 10%;
            text-align: center;
            line-height: 50px;
        }

        .input02 {
            width: 80%;
            height: 50px;
            border: 1px solid #fff;
            border-radius: 6px;
            position: absolute;
            top: 45%;
            left: 10%;
            text-align: center;
            line-height: 50px;
        }

        .btn {
            width: 80%;
            height: 50px;
            border: 1px solid #fff;
            border-radius: 6px;
            position: absolute;
            top: 75%;
            left: 10%;
            font-weight: 900;
            color: #fff;
            letter-spacing: 2px
        }

        input {
            background-color: #2f89e9;
            padding: 10px;
            font-size: 12px;
            color: #fff;
        }
        .info{
            color:#a9c4dc;
            font-size: 1.5em;
            position: relative;
            margin: auto;
            top: 65%;
            width: 80%;
            height: 10%;
            text-align: center;
        }
    </style>
</head>
<body>
<div style="height: 10px;"></div>
<!-- 内容框 -->
<div class="t0">
    优智CRM管理系统欢迎您的使用
</div>

<div>
    <div class="box">
        <div class="input01">
            <label>账号:</label>
            <input type="text" name="username" id="username">
        </div>
        <div class="input02">
            <label>密码:</label>
            <input type="password" name="password" id="password">
        </div>
        <div class="info" id="info"></div>
        <input type="submit" class="btn" id="btn" value="登录并开始使用"/>
    </div>
</div>

</div>
</body>
<script>
    $(function () {
        $("#username").focus();
    })
    function login () {
        $.ajax({
            url: "[[${#httpServletRequest.getContextPath()}]]/m_member/login",
            type: "post",
            data: {
                username: $("#username").val(),
                password: $("#password").val()
            },
            success: function (result) {
                console.log(result);
                if (result == 0) {
                    $("#info").html("用户名或密码错误");
                }
                if (result == -1) {
                    $("#info").html("服务器错误!请联系管理员！");
                }
                if (result == 1) {
                    $("#info").html("登录成功!正在跳转。。。");
                    location.href = "[[${#httpServletRequest.getContextPath()}]]/mobile_welcome";
                }
            },
            error: function (xrh, error, status) {
                $("#info").html("Ajax....服务器错误!请联系管理员！");
            }
        })
    }
    $('#password').bind('keyup',function (event) {
        if (event.keyCode == "13") {
            //回车执行查询
            $("#btn").click(login());
        }
    });
    $("#btn").click(function () {
        login();
    })
</script>
</html>
